<template>
  <div class="home">
    <!-- 第一行 -->
    <TopPanel></TopPanel>
    <!-- 三列 -->
    <div class="bottom">
      <div class="fee"></div>
      <div class="medium">
        <div class="map"></div>
        <div class="trade-amount"></div>
      </div>
      <div class="customer"></div>
    </div>
  </div>
</template>

<script>
import TopPanel from "./components/TopPanel";
export default {
  name: "Home",
  components: {
    TopPanel,
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  .bottom {
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
    padding: 0px 20px;
    height: 520px;
    .fee {
      height: 100%;
      width: 360px;
      background-color: #fff;
    }
    .medium {
      height: 100%;

      flex: 1;
      display: flex;
      flex-direction: column;
      row-gap: 10px;
      .map {
        background-color: #fff;
        flex: 1;
      }
      .trade-amount {
        background-color: #fff;
        height: 100px;
      }
    }
    .customer {
      height: 100%;
      width: 360px;
      background-color: #fff;
    }
  }
}
</style>
